<template>
    <div class="teacherPersonInfo">
      <avatarUpload></avatarUpload>
      <el-form :model="teacherForm" :rules="rules" ref="teacherForm" label-width="100px" class="">
        <el-form-item label="编号" prop="teacherId">
          <el-input v-model="teacherForm.teacherId" placeholder="id 也能改???"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="teacherName">
          <el-input v-model="teacherForm.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="teacherSex">
          <el-radio-group v-model="teacherForm.teacherSex">
            <el-radio label="man"></el-radio>
            <el-radio label="woman"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="teacherBirth" label="出生日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="teacherForm.teacherBirth" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="职称" prop="positionalTitle">
          <el-select v-model="teacherForm.positionalTitle" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="teacherPosition">
          <el-select v-model="teacherForm.teacherPosition" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" prop="teacherTel">
          <el-input v-model="teacherForm.teacherTel"></el-input>
        </el-form-item>
        <el-form-item label="所属专业" prop="Major">
          <el-select v-model="teacherForm.Major" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所学专业" prop="graduateMajor">
          <el-select v-model="teacherForm.graduateMajor" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-select v-model="teacherForm.education" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学位" prop="degree">
          <el-select v-model="teacherForm.degree" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="毕业学校" prop="graduateSchool">
          <el-input v-model="teacherForm.graduateSchool"></el-input>
        </el-form-item>
        <el-form-item prop="joinSchoolTime" label="入校时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="teacherForm.joinSchoolTime" style="width: 100%;"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('teacherForm')">立即创建</el-button>
          <el-button @click="resetForm('teacherForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<style>
</style>
<script>
    import AvatarUpload from '../fileUpload/avatarUpload'

    export default{
        name : 'teacherPersonInfo',
        data(){
            return{
                teacherForm: {
                    teacherId: '',
                    teacherName: '',
                    teacherSex: '',
                    teacherBirth: '',
                    positionalTitle: '',
                    teacherTel: '',
                    Major: '',
                    graduateMajor: '',
                    education: '',
                    degree: '',
                    graduateSchool: '',
                    joinSchoolTime: '',
                    teacherPosition: ''
                },
                rules: {
                    teacherId: [
                        { required: true, message: '请输入教师编号', trigger: 'blur' },
                    ],
                    teacherName: [
                        { required: true, message: '请输入教师名称', trigger: 'blur' },
                    ],
                    teacherSex: [
                        { required: true, message: '请选择性别', trigger: 'blur' },
                    ],
                    teacherBirth: [
                        { required: true, message: '请选择出生日期', trigger: 'blur' },
                    ],
                    positionalTitle: [
                        { required: true, message: '请输入职称', trigger: 'blur' },
                    ],
                    teacherTel: [
                        { required: true, message: '请输入联系方式', trigger: 'blur' },
                    ],
                    Major: [
                        { required: true, message: '请输入所属专业', trigger: 'blur' },
                    ],
                    graduateMajor: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    education: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    degree: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    graduateSchool: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    joinSchoolTime: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ],
                    teacherPosition: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                    ]
                }
            }
        },
        components:{
            AvatarUpload
        },
         methods: {
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                alert('submit!');
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          }
        }
    }
</script>
